<template>
  <el-form
    label-width="150px"
    :model="currentRow"
    :rules="rules"
    ref="ruleForm"
  >
    <!-- {{ menuIdLists }} -->
    <el-form-item
      label="权限名称"
      v-if="currentRow.type === 'role'"
      prop="name"
    >
      <el-input v-model="currentRow.name" placeholder="权限名称" />
    </el-form-item>
    <el-form-item label="备注" v-if="currentRow.type === 'role'">
      <el-input v-model="currentRow.remark" placeholder="备注" />
    </el-form-item>
    <!-- {{currentRow.memberList}} -->
    <el-form-item label="用户权限组配置">
      <div v-for="(item, index) of currentRow.memberList" :key="index">
        <div style="background: #f3f3f3; padding: 0 14px; margin-top: 5px">
          <el-checkbox
            :indeterminate="item.isIndeterminate"
            v-model="item.checkAll"
            @change="handleCheckAllChange($event, item)"
            >{{ item.name }}</el-checkbox
          >
        </div>
        <div style="padding: 0 14px">
          <el-checkbox-group
            v-model="item.select"
            @change="handleCheckedCitiesChange($event, item)"
          >
            <el-checkbox
              v-for="member in item.list"
              :label="currentRow.type === 'role' ? member.buttonId : member.id"
              :key="currentRow.type === 'role' ? member.buttonId : member.id"
              >{{
                currentRow.type === 'role' ? member.buttonName : member.userName
              }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button v-if="currentRow.type === 'role'"   v-permission="'preGroup:add'" type="success" @click="submit">确定</el-button>
      <el-button v-else  v-permission="'preGroup:add'" type="success" @click="submit">确定</el-button>

    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    currentRow: {
      type: Object,
      default: () => {},
    },
    menuIdList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      menuIdLists: [],
      ruleForm: {
        name: '',
        remark: '',
      },
      rules: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
      },
    }
  },
  watch: {
    menuIdList: {
      deep: true,
      immediate:true,
      handler(val) {
        this.menuIdLists = val
      },
    },
  },
  methods: {
    handleCheckAllChange(val, item) {
      if (val) {
        this.menuIdLists.push(item.id)
      } else {
        let index = this.menuIdLists.findIndex((it) => item.id === it)
        this.menuIdLists.splice(index, 1)
      }
      if (this.currentRow.type === 'role') {
        item.select = val ? item.list.map((item) => item.buttonId) : []
      } else {
        item.select = val ? item.list.map((item) => item.id) : []
      }
      item.isIndeterminate = false
    },
    handleCheckedCitiesChange(value, item) {
      let checkedCount = value.length
      item.checkAll = checkedCount === item.list.length
      if(item.checkAll&&!this.menuIdLists.includes(item.id)){
        this.menuIdList.push(item.id)
      }
      item.isIndeterminate = checkedCount > 0 && checkedCount < item.list.length
    },
    submit() {
      const list = this.currentRow.memberList.reduce((pre, current) => {
        return [...pre, ...current.select]
      }, [])
      let param = {
        id: this.currentRow.id,
        name: this.currentRow.name,
      }
      if (this.currentRow.type === 'role') {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            param = {
              ...param,
              buttonIdList: list,
              menuIdList: this.menuIdLists,
              remark: this.currentRow.remark,
            }
          }
        })
      } else {
        param = {
          ...param,
          memberIdList: list,
        }
      }
      this.$emit('submit-arr', param)
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
